<template>
  <div>
    <el-card
      style="width: 150px; color: #444; border: none; border-radius: 20px"
      shadow="never"
      text-13
    >
      <div class="static-item-title">{{ data.title }}</div>
      <div class="static-item-value" mt-8 flex-center justify-start>
        <div class="static-item-icon" color="#444">
          <SvgIcon :iconClass="data.icon"></SvgIcon>
        </div>
        <div ml-5 :style="{ color: data.color }">{{ data.value }}</div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import SvgIcon from "@/components/SvgIcon";

defineProps({
  data: { type: Object, required: true },
});
</script>

<script>
/**
 * 静态项卡片
 * 负责人：唐诗轶
 */
export default {
  name: "StaticItemCard",
};
</script>
